<script setup lang="ts">
import DUIXCom from '@/components/DUIX/DUIX-com.vue'
import { ref, onMounted } from 'vue'

const showRight = ref(false)
onMounted(() => {
  showRight.value = true
})
</script>

<template>
  <div class="size-full">
    <DUIXCom />
    <div class="w-full h-[93px] relative z-20">
      <RouterView v-slot="{ route, Component }" name="head">
        <transition :enter-active-class="`animate__animated ${route.meta.transition}`">
          <component :is="Component"></component>
        </transition>
      </RouterView>
    </div>
    <div class="pointer-events-none flex" style="height: calc(100% - 93px)">
      <div class="h-full pointer-events-auto relative z-[2] w-[29%]">
        <RouterView v-slot="{ route, Component }" name="left">
          <transition :enter-active-class="`animate__animated ${route.meta.transition}`">
            <component :is="Component" :show="showRight"></component>
          </transition>
        </RouterView>
      </div>
      <div class="center h-full pointer-events-none relative z-[1] w-[42%]">
        <RouterView v-slot="{ route, Component }" name="center">
          <transition :enter-active-class="`animate__animated ${route.meta.transition}`">
            <component :is="Component"></component>
          </transition>
        </RouterView>
      </div>
      <div class="right h-full pointer-events-auto relative z-[2] w-[29%]">
        <RouterView v-slot="{ route, Component }" name="right">
          <transition :enter-active-class="`animate__animated ${route.meta.transition}`">
            <component :is="Component" :show="showRight"></component>
          </transition>
        </RouterView>
      </div>
    </div>
  </div>
</template>
